<template>
<div>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item><a>爱心服务</a></el-breadcrumb-item>
    <el-breadcrumb-item>顾客意见</el-breadcrumb-item>
  </el-breadcrumb>
  <el-divider></el-divider>
<div>
  <el-row>
    <el-button style="float: left" type="primary" round
               @click="openEditDialog">新增意见</el-button>
  </el-row>
</div>
  <div style="padding-bottom: 30px">
    <el-select placeholder="请选择类型" style="width: 300px; padding-right: 10px;float: left " v-model="editForm.type">
      <el-option v-for="item in options"
                 :key="item.value"
                 :lable="item.lable"
                 :value="item.value"></el-option>
    </el-select>
    <el-button @click="searchByType(page,pageSize)" type="primary" icon="el-icon-search" style="float:left;">搜索
    </el-button>
    <el-button @click="goBack()" type="primary" style="float:left;">返回</el-button>
  </div>

  <el-table :data="orderArr">
    <el-table-column type="index" label="记录" width="100"></el-table-column>
    <el-table-column prop="name" label="房间号" width="200"></el-table-column>
    <el-table-column prop="type" label="类型" width="100"></el-table-column>
    <el-table-column prop="content" label="内容"></el-table-column>
    <el-table-column prop="created" label="时间" width="250"></el-table-column>
  </el-table>


  <div class="block">
    <!-- 以下是弹出的新增服务的对话框 -->
    <el-dialog title="新增意见" :visible.sync="dialogFormVisible">
      <el-form :model="editForm">
        <el-form-item label="房间号" :label-width="formLabelWidth">
          <el-input v-model="editForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型" :label-width="formLabelWidth">
          <el-select v-model="value" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内容" :label-width="formLabelWidth">
          <el-input v-model="editForm.content" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="时间" :label-width="formLabelWidth">
            <div class="block">
              <el-date-picker
                  v-model="value2"
                  type="datetime"
                  align="right"
                  unlink-panels
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="pickerOptions">
              </el-date-picker>
            </div>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitEditForm()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
  <div class="block">
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>

</div>
</template>

<script>
export default {
  name: "CustomerInput",
  data() {
    return {
      options: [{
        value: '五星好评',
        label: '五星好评'
      }, {
        value: '好评',
        label: '好评'
      }, {
        value: '差评',
        label: '差评'
      }],
      value: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      value2:'',
      orderArr:[], //存放接收后端的数据
      page: 1, // 当前页 默认设值1
      pageSize: 10, // 每页显示条目 默认设置5
      total: 50 ,// 条目总数
      productArr: [],
      dialogFormVisible: false,
      editForm: {
        name: '',
        type: '',
        content:'',
        created:''


      },
      formLabelWidth: '120px'
    }
  },
  methods:{
    searchByType(page, pageSize) {
      let url;
      url = "http://localhost:9085/opinion/selectByType" + "?type=" + this.editForm.type;
          console.log(url)

      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url, {
            params: {
              page, pageSize
            }
          }).then((response) => {
        let responseBody = response.data;
        this.orderArr = responseBody.data.list;
        this.total = responseBody.data.total;
      });
    },
    goBack() {
      this.handleCurrentChange(1);
    },
    submitEditForm() {
      let url = 'http://localhost:9085/opinion/new';
      console.log('url = ' + url);
      this.editForm.type=this.value;
      this.editForm.created=this.value2
      console.log(this.value)
      console.log(this.value2)
      let formData = this.qs.stringify(this.editForm);
      console.log('formData = ' + formData);

      this.axios.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url, formData).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$message({
            message: '添加成功！',
            type: 'success'
          });
          this.dialogFormVisible = false;
          this.loadPage();
        } else if (responseBody.state == 40400) {
          this.$alert(responseBody.message, '警告', {
            confirmButtonText: '确定',
            callback: action => {// eslint-disable-line no-unused-vars
              this.dialogFormVisible = false;
              this.loadPage();
            }
          });
        } else {
          this.$message.error(responseBody.message);
        }
      });
    },
    openEditDialog(){
      this.dialogFormVisible=true;
    },
    loadCustomerInput() {
      let url = 'http://localhost:9085/opinion/';
      console.log('url = ' + url);

      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.productArr = responseBody.data;
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.loadPage(this.page,this.pageSize);
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page = val;
      this.loadPage(this.page,this.pageSize);
      console.log(`当前页: ${val}`);
    },
    loadPage(page,pageSize) {
      let url = "http://localhost:9085/opinion/";
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url,{
            params:{
              page,
              pageSize
            }
          }).then(resp => {
        let responseBody = resp.data;
        this.orderArr = responseBody.data.list;
        this.total = responseBody.data.total;
        console.log(responseBody);
      });
    },
  },
  mounted() {
    this.loadPage();

  }
}
</script>

<style scoped>

</style>
